<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	#header {
		background: none;
		border: none;
		color: #FFF;
	}
	#header .aui-title {
		color: #FFF;
		font-size: 0.8rem;
		bottom: auto;
	}
	#header .back {
		background-image: url(../../image/common/back03.png);
	}
	.content {
		height: 100vh;
	}
	.picBox {
		width: 100%;
		position: relative;
	}
	.swiper-slide {
		overflow: hidden;
	}
	.addBox {
		min-height: 8rem;
	}
	.addBtn {
		width: 2.8rem;
		font-size: 0.6rem;
		color: #666;
		text-align: center;
	}
	.addBtn img {
		margin-bottom: 0.25rem;
	}
	.trash {
		position: absolute;
		left: 50%;
		bottom: 1rem;
		width: 1.6rem;
		height: 1.6rem;
		background: #FFF url(../../image/common/13.png) no-repeat center center;
		background-size: 0.8rem;
		border-radius: 50%;
		z-index: 5;
		margin-left: -0.8rem;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.trash.show {
		visibility: visible;
		opacity: 1;
	}
	.trash.hover {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

</style>
</head>

<body>
<div id="app">
	<header class="topFix aui-bar aui-bar-nav aui-bar-light" id="header">
		<div class="aui-pull-left back" tapmode onClick="api.closeWin();"></div>
		<div class="aui-title"></div>
		<div class="aui-pull-right aui-flex-col aui-flex-middle">
			<div class="comPublishBtn" tapmode onClick="save();">下一步(<span id="pickNum">{{ publish_label.length }}</span>)</div>
		</div>
	</header>
	<div class="picBox">
		<div class="trash"></div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="it in publish_label">
					<div class="photo" :data-originalPath="it.originalPath"><img :src="it.image" width="100%" alt=""></div>
					<template v-if="it.labelData.length">
					<div class="postTag" v-for="(tag,tagIndex) in it.labelData" :class="{'fan' : tag.isFan }" :data-ind="tagIndex" :data-godId="tag.godId" :style="{left: tag.left, top: tag.top}">
						<div class="dotBox" v-tap="[togFan,tag]">
							<div class="dot ani"></div>
							<div class="dot"></div>
						</div>
						<div class="tagName">{{tag.godTtl}}</div>
					</div>
					</template>

				</div>

			</div>
		</div>
	</div>
	<div class="addBox aui-flex-row aui-flex-middle aui-flex-center">
		<div class="addBtn" tapmode onClick="openAddTag();"><img src="../../image/publish/04.png" alt="">添加商品</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vue-tap.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../script/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
var slider;
var vuedata = {
	publish_label: []
}
var vm = new Vue({
	el: '#app',
	data: vuedata,
	mounted: function() {
		this.$nextTick(function () {
		})
	},
	methods: {
		togFan: function(tag){
			tag.isFan = !tag.isFan;
		}
	}
});
apiready = function() {
	api.parseTapmode();
	var header = $api.byId('header');
	$api.fixStatusBar(header);

	if( getPrefs('_PUBLISH_LABEL_') ){
		vuedata.publish_label = getPrefs('_PUBLISH_LABEL_');
		setTimeout(function(){
			sliderInit();
			dragEvent();
			dropEvent();
		},50);
	}

	api.addEventListener({
		name: 'publishAddGodEvent'
	}, function(ret, err){
		var newArr = ret.value.info;
		var activeIndex = slider.activeIndex;
		vuedata.publish_label[activeIndex].labelData = vuedata.publish_label[activeIndex].labelData.concat(newArr);
		setTimeout(function(){
			dragEvent();
		},100);
	});

};

//拖动标签
var winW = $(window).width();
function dragEvent(){
	$('.postTag').each(function(){
		var _this = $(this);
		var tag = _this.find('.tagName');
		if(!_this.hasClass('ui-draggable')){
			_this.draggable({
				containment: "parent",
				handle: '.tagName',
				drag: function( event, ui ) {
					// var tagX = tag.offset().left;
					// if(!_this.hasClass('fan')){
					// 	if(winW-tagX >= 100 ){
					// 		tag.css('max-width', winW-tagX-20 );
					// 	}
					// }else{

					// }
				}
			});
		}
	});
}
//删除标签
function dropEvent(){
	$( ".trash" ).droppable({
		accept: ".postTag",
		activeClass: "show",
		hoverClass: "hover",
		tolerance: "pointer",
		drop: function( event, ui ) {
			ui.draggable.remove();
		},
		over: function( event, ui ) {
			ui.draggable.addClass('scale');
		},
		out: function( event, ui ) {
			ui.draggable.removeClass('scale');
		},
    });
}

//顶部图片滑动
function sliderInit(){
	slider = new Swiper('.swiper-container',{
		speed: 600,
		autoplay: false,
		followFinger: false,
		speed: 600,
		autoHeight: true,
		effect : 'fade',
		fadeEffect: {
			crossFade: true,
		},
		pagination: {
			el: '.aui-title',
			type: 'fraction'
		}
	})
}
//添加商品
function openAddTag(){
	api.openWin({
		name: 'search_product_win',
		url: 'search_product_win.html'
	});
}

//下一步
function save(){
	var nextData = [];
	$$('.swiper-slide').each(function(){
		var _slide = $$(this);
		var img = _slide.find('.photo img').attr('src');
		var originalPath = _slide.find('.photo').data('originalPath');
		var box_width = _slide.find('.photo').width();
		var box_height = _slide.find('.photo').height();
		var obj = {
			image: img,
			originalPath: originalPath,
			labelData: []
		}
		_slide.find('.postTag').each(function(){
			var _tag = $$(this);
			var tagId = _tag.data('godId');
			var tagTtl = _tag.find('.tagName').text();
			var isFan = false;
			if(_tag.hasClass('fan')){
				isFan = true;
			}

			var tagTop = _tag.css('top');
			var tagLeft = _tag.css('left');
			var top = parseFloat( _tag.css('top') ).toFixed(2);
			var left = parseFloat( _tag.css('left') ).toFixed(2);
			if(tagTop.indexOf('px') > 0){
				top = parseFloat( (top/box_height)*100 ).toFixed(2);
				left = parseFloat( (left/box_width)*100 ).toFixed(2);
			}
			var tagObj = {
				godId: tagId,
				godTtl: tagTtl,
				left: left + '%',
				top: top + '%',
				isFan: isFan
			}
			obj.labelData.push(tagObj);
		});
		nextData.push(obj);
	});
	setPrefs('_PUBLISH_LABEL_', nextData);
	setTimeout(function(){
		api.openWin({
			name: 'publish_finish_win',
			url: 'publish_finish_win.html',
			slidBackEnabled: false,
			reload: true,
			animation: {
				type: 'movein',
				subType:"from_bottom"
			},
			pageParam: {}
		});
	},50);
	

}
</script>
</html>
